<template>
  <div>
    <div class="head-top">
      <mt-header title="阅读记录">
        <router-link to="/myself" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>
    <div class="main" v-for="(item,index) in listdata" :key="index">
      <mt-cell class='time' :title="item.createDate | dataYMD"></mt-cell>
      <div class="cells" @click="goToView(item)">
        <span class="subtitle" v-html="item.title">心理学家李静：发现孩子初恋了会有异常的生活举动，家长应该多去关心留意</span>
        <img v-if="item.type == 3" src="../../../../static/myself/MyCollect/video.png" width="25px" height="25px" />
        <!-- <img src="../../../../static/myself/MyCollect/speaker.png" width="25px" height="25px" /> -->
        <img v-else src="../../../../static/myself/MyCollect/article.png" width="25px" height="25px" />
        <span class="subtime">{{item.createDate | dataHM}}</span>
      </div>
      <!--<div class="cells">
				<span class="subtitle">心理学家李静：发现孩子初恋了会有异常的生活举动，家长应该多去关心留意</span>
				<img src="../../../../static/myself/MyCollect/Speaker.png" width="25px" height="25px" />

			</div>-->

    </div>

  </div>
</template>

<script>
import { Toast } from "mint-ui";
import { MessageBox } from "mint-ui";
import moment from "moment";
import baseurl from "../../../api/baseurl.js";
import api from "../../../api/api.js";

export default {
  data() {
    return {
      userid: "",
      listdata: []
    };
  },
  created() {
    var str = localStorage.getItem("userid"); //取
    this.userid = JSON.parse(str);
    this.getinfo();
  },
  //时间过滤器
  filters: {
    dataHM: function(el) {
      return moment(el).format("h:mm");
    },
    dataYMD: function(el) {
      return moment(el).format("YYYY-MM-DD");
    }
  },
  methods: {
    goToView(item) {
      if (item.type == 1) {
        localStorage.setItem("bookId", item.fileId);
        this.$router.push({
          name: "bookcontent"
        });
      } else if (item.type == 2) {
        sessionStorage.setItem("readdata", JSON.stringify(item));
        this.$router.push({
          name: "readcontent",
          params: { type: 2 }
        });
      } else if (item.type == 3) {
        this.$router.push({
          name: "videocontent",
          params: {
            videodata: item
          }
        });
      } else if (item.type == 4) {
        let imgSrc = api.PdfSrc;
        let str = item.describ.substring(0, 12);
        this.$router.push({
          name: "readingPdf",
          params: {
            bookurl: imgSrc + "/skjc_bz/" + str + "/" + item.describ + ".pdf",
            bookName: item.title
          }
        });
      } else if (item.type == 5) {
        let imgSrc = api.PdfSrc;
        let str = item.describ.substring(0, 10);
        this.$router.push({
          name: "readingPdf",
          params: {
            bookurl: imgSrc + "/skjc_qk/" + str + "/" + item.describ + ".pdf",
            bookName: item.title
          }
        });
      }
      console.log(item);
    },
    getinfo() {
      this.$http({
        method: "get",
        url: baseurl.urls + "/readrecord/selectReadrecord",
        params: {
          userid: localStorage.getItem("userid"),
          edition:localStorage.getItem("accid")
        }
      })
        .then(response => {
          if (response.status == 200) {
            this.listdata = response.data.date.list;
            console.log(this.listdata);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
    // addbooks() {
    //   const params = new URLSearchParams();
    //   params.append("userid", this.userid);
    //   params.append("type", 1);
    //   params.append("title", "最后一公里的哲学");
    //   //播放时长
    //   params.append("recorddate", 10);
    //   //fileid 唯一值不能重复
    //   params.append("fileid", 1);

    //   this.$http({
    //     method: "post",
    //     url: baseurl.urls + "/readrecord/addReadrecord",
    //     data: params
    //   })
    //     .then(response => {
    //       if (response.status == 200) {
    //         console.log(response);
    //       }
    //     })
    //     .catch(error => {
    //       console.log(error);
    //     });
    // }
  }
};
</script>

<style scoped>
.mint-cell {
  min-height: 40px;
  margin-top: 2px;
  /*background-color: skyblue;*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time {
  min-height: 30px;
  height: 30px;
  background-color: #f8f8f8;
  color: #a1a1a1;
}

.cells {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  background-color: #ffffff;
  margin-top: 2px;
  padding: 0 15px;
}

.cells .subtitle {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 5px;
  font: 15px/15px "microsoft yahei";
  color: #252525;
}

.mint-cell-wrapper {
  font-size: 13px;
}

.cells .subtime {
  padding-left: 10px;
  color: #a1a1a1;
  font: 13px/13px "microsoft yahei";
}

.cells img {
  margin-left: 5px;
}
</style>